<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>基础知识</title>
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"" rel="stylesheet">
	<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/3.2.3/animate.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="../../static/css/public.css" />
	<style type="text/css">
		li{
			text-indent: 2em;
			padding: 5px 0;
		}
	</style>
</head>
<body>
	<!-- 回到顶部 -->
	<div class="topBtn">
		<a href="#top">
			<i class="fa fa-long-arrow-up"></i>
		</a>
	</div>
	<!--右边内容-->
	<div id="app" class="main animated fadeInRight">
		<div class="shadow">
			<div class="Table" v-cloak id="top">
				<div class="TableRow" v-for="(el,index) in list">
					<a class="RowLeft" :href="'#'+el.id">{{el.name}}</a>
					<span class="RowRight">{{el.explain}}</span>
				</div>
			</div>
			<div>
				<h4>线性渐变</h4>
				<p>
					使用&lt;defs&gt;标签包裹&lt;linearGradient&gt;线性渐变标签。
					内部使用&lt;stop&gt;来设定，offset进行百分比设定，stop-color设定颜色。
					 默认颜色是从左到右变化
				</p>
				<svg xmlns="http://www.w3.org/2000/svg"
				     xmlns:xlink="http://www.w3.org/1999/xlink"
				     version="1.1" height="200" width="450">
					<defs>
					   <linearGradient id="a1">
						 <stop offset="35%" stop-color="#F00" />
						 <stop offset="65%" stop-color="blue" />
					   </linearGradient>
					</defs>
					<rect x="50" y="30" width="100" height="100" 
					stroke="#000" stroke-width="5" fill="url(#a1)"></rect>
					<circle cx="220" cy="80" r="50" stroke="#000" 
					stroke-width="5" fill="url(#a1)"></circle>
					<rect x="290" y="30" width="100" height="100" 
					stroke="url(#a1)" stroke-width="5" fill="none"></rect>
				</svg>
				<pre>
	&lt;defs&gt; ==>用于自定义形状，它内部的代码不会显示，仅供引用。
	   &lt;linearGradient id="a1"&gt;    ==>添加id方便调用
		 &lt;stop offset="35%" stop-color="#F00" /&gt;
		 &lt;stop offset="65%" stop-color="blue" /&gt;
	   &lt;/linearGradient&gt;
	&lt;/defs&gt;
	&lt;rect x="50" y="30" width="100" height="100" 
	stroke="#000" stroke-width="5" fill="url(#a1)"&gt;&lt;/rect&gt;
	&lt;circle cx="220" cy="80" r="50" stroke="#000" 
	stroke-width="5" fill="url(#a1)"&gt;&lt;/circle&gt;
	&lt;rect x="290" y="30" width="100" height="100" 
	stroke="url(#a1)" stroke-width="5" fill="none"&gt;&lt;/rect&gt;				
				</pre>
				<div>
					若要改变渐变的方向，只需在&lt;linearGradient&gt;标签内添加相对坐标的属性既可以。
					&lt;/linearGradient x1="0%" y1="0%" x2="100%" y2="100%"&gt;，在坐标两点的连线
					就是渐变的方向。现在就是对角的渐变示例：
				</div>
				<svg xmlns="http://www.w3.org/2000/svg"
				     xmlns:xlink="http://www.w3.org/1999/xlink"
				     version="1.1" height="200" width="450">
					<defs>
					   <linearGradient id="a2" x1="0%" y1="0%" x2="100%" y2="100%">
						 <stop offset="35%" stop-color="#F00" />
						 <stop offset="65%" stop-color="blue" />
					   </linearGradient>
					</defs>
					<rect x="50" y="30" width="100" height="100" 
					stroke="#000" stroke-width="5" fill="url(#a2)"></rect>
					<circle cx="220" cy="80" r="50" stroke="#000" 
					stroke-width="5" fill="url(#a2)"></circle>
					<rect x="290" y="30" width="100" height="100" 
					stroke="url(#a2)" stroke-width="5" fill="none"></rect>
				</svg>
			</div>
			<div>
				<h4 id="radial">放射性渐变</h4>
				<p>
					和线性渐变使用方法一致，将&lt;linearGradient&gt;换成
					&lt;radialGradient&gt;，通过cx，xy设置渐变的坐标位置。
					默认是图像中间，
				</p>
				<svg xmlns="http://www.w3.org/2000/svg"
				     xmlns:xlink="http://www.w3.org/1999/xlink"
				     version="1.1" height="200" width="450">
					<defs>
					   <radialGradient id="a3" cx="20%" cy="40%">
						 <stop offset="35%" stop-color="#F00" />
						 <stop offset="65%" stop-color="blue" />
					   </radialGradient >
					</defs>
					<rect x="50" y="30" width="100" height="100" 
					stroke="#000" stroke-width="5" fill="url(#a3)"></rect>
					<circle cx="220" cy="80" r="50" stroke="#000" 
					stroke-width="5" fill="url(#a3)"></circle>
					<rect x="290" y="30" width="100" height="100" 
					stroke="url(#a3)" stroke-width="5" fill="none"></rect>
				</svg>
				<pre>
	&lt;defs&gt;
	   &lt;radialGradient id="a3" cx="20%" cy="40%"&gt;
		 &lt;stop offset="35%" stop-color="#F00" /&gt;
		 &lt;stop offset="65%" stop-color="blue" /&gt;
	   &lt;/radialGradient &gt;
	&lt;/defs&gt;
	&lt;rect x="50" y="30" width="100" height="100" 
	stroke="#000" stroke-width="5" fill="url(#a3)"&gt;&lt;/rect&gt;
	&lt;circle cx="220" cy="80" r="50" stroke="#000" 
	stroke-width="5" fill="url(#a3)"&gt;&lt;/circle&gt;
	&lt;rect x="290" y="30" width="100" height="100" 
	stroke="url(#a3)" stroke-width="5" fill="none"&gt;&lt;/rect&gt;				
				</pre>
			</div>
			<div>
				<h4 id='image'>图案</h4>
				<p>
					&lt;pattern&gt;表示一个图案的区域，包裹一个图形标签，
					图形标签的大小必须比&lt;pattern&gt;小，否则就会被裁剪掉。
					以下面的示例中，重复调用了&lt;pattern&gt;作为底图
				</p>
				<svg xmlns="http://www.w3.org/2000/svg"
				     xmlns:xlink="http://www.w3.org/1999/xlink"
				     version="1.1" height="200" width="450">
					<defs>
					  <pattern id="ax" patternUnits="userSpaceOnUse" x="0" y="0" width="40" height="30">
					    <rect x="0" y="0" width="25" height="25" stroke="#none" fill="#09f"></rect>
					  </pattern> 
					</defs>
					<circle cx="80" cy="80" r="70" 
					stroke="#000" stroke-width="5" fill="url(#ax)"></circle>
				</svg>
				<pre>
	&lt;defs&gt;
	  &lt;pattern id="ax" patternUnits="userSpaceOnUse" x="0" y="0" width="30" height="30"&gt;
		&lt;rect x="0" y="0" width="25" height="25" stroke="#none" fill="#09f"&gt;&lt;/rect&gt;
	  &lt;/pattern&gt; 
	&lt;/defs&gt;
	&lt;circle cx="60" cy="60" r="50" 
	stroke="#000" stroke-width="5" fill="url(#ax)"&gt;&lt;/circle&gt;				
				</pre>
			</div>
			<div>
				<h4 id='feGaussianBlur'>高斯模糊</h4>
				<p>
					&lt;feGaussianBlur&gt;用来设置高斯模糊，多数用作底图
				</p>
				<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
				  <defs>
				    <filter id="f1" x="0" y="0">
				      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
				    </filter>
				  </defs>
				  <rect width="90" height="90" stroke="green" stroke-width="3"
				  fill="yellow" filter="url(#f1)" />
				</svg>
				<pre>
	&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
	  &lt;defs&gt;
	    &lt;filter id="f1" x="0" y="0"&gt;
	      &lt;feGaussianBlur in="SourceGraphic" stdDeviation="15" /&gt;
	    &lt;/filter&gt;
	  &lt;/defs&gt;
	  &lt;rect width="90" height="90" stroke="green" stroke-width="3"
	  fill="yellow" filter="url(#f1)" /&gt;
	&lt;/svg&gt;				
				</pre>
				<ul>
					<li>&lt;filter&gt;元素id属性定义一个滤镜的唯一名称</li>
					<li>&lt;feGaussianBlur&gt;元素定义模糊效果</li>
					<li>in="SourceGraphic"这个部分定义了由整个图像创建效果</li>
					<li>stdDeviation属性定义模糊量</li>
				</ul>
				<svg xmlns="http://www.w3.org/2000/svg" 
				 height="200" version="1.1">
					<defs>
						<g id="cvm">
							<path fill="#0085F6" class="st2" d="M109.2,165c-34.8,0-63-28.2-63-63s28.2-63,63-63
								c33.1,0,60.2,25.5,62.8,58h3c-2.6-34.1-31-61-65.8-61
								c-36.5,0-66,29.5-66,66s29.5,66,66,66c34.8,0,63.2-26.9,65.8-61h-3
								C169.4,139.5,142.3,165,109.2,165z M142.2,115V85v-2v-1l-33-20
								l-33,20v1v2v30v3L99,131.8c0.3-0.8,0.8-1.5,1.3-2.2l-21.1-12.8
								v-30l30,18.2l30-18.2v30L113,132.7c-0.9-1-2.2-1.7-3.8-1.7
								c-2.8,0-5,2.2-5,5s2.2,5,5,5s5-2.2,5-5c0-0.3,0-0.7-0.1-1l28.1-17
								L142.2,115L142.2,115z M139.2,83.8l-30,18.2l-30-18.2v-0.6
								l30-18.2l30,18.2V83.8z"></path>
						</g>
						<filter id="shadow">
						<feGaussianBlur in="SourceAlpha" stdDeviation="5"></feGaussianBlur>
						</filter>
					</defs>
					<g id="test" filter="url(#shadow)">
						<use xlink:href="#cvm" x="0" y="0"></use>
					</g>
				</svg>
				<pre>
	&lt;defs&gt;
		&lt;g id="cvm"&gt;
			&lt;path fill="#0085F6" class="st2" d="M109.2,165c-34.8,0-63-28.2-63-63s28.2-63,63-63
				c33.1,0,60.2,25.5,62.8,58h3c-2.6-34.1-31-61-65.8-61
				c-36.5,0-66,29.5-66,66s29.5,66,66,66c34.8,0,63.2-26.9,65.8-61h-3
				C169.4,139.5,142.3,165,109.2,165z M142.2,115V85v-2v-1l-33-20
				l-33,20v1v2v30v3L99,131.8c0.3-0.8,0.8-1.5,1.3-2.2l-21.1-12.8
				v-30l30,18.2l30-18.2v30L113,132.7c-0.9-1-2.2-1.7-3.8-1.7
				c-2.8,0-5,2.2-5,5s2.2,5,5,5s5-2.2,5-5c0-0.3,0-0.7-0.1-1l28.1-17
				L142.2,115L142.2,115z M139.2,83.8l-30,18.2l-30-18.2v-0.6
				l30-18.2l30,18.2V83.8z"&gt;&lt;/path&gt;
		&lt;/g&gt;
		&lt;filter id="shadow"&gt;
			&lt;feGaussianBlur in="SourceAlpha" stdDeviation="5"&gt;&lt;/feGaussianBlur&gt;
		&lt;/filter&gt;
	&lt;/defs&gt;
	
	&lt;g id="test" filter="url(#shadow)"&gt;
		&lt;use xlink:href="#cvm" x="0" y="0"&gt;&lt;/use&gt;
	&lt;/g&gt;				
				</pre>
			</div>
			<div>
				<h4 id='boxshadow'>投影</h4>
				<svg xmlns="http://www.w3.org/2000/svg" 
				 height="200" version="1.1">
					<filter id="shadowss">
						<feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"></feGaussianBlur>
						<feOffset in="blur" dx="4" dy="4" result="offset"></feOffset>
						<feMerge>
							<feMergeNode in="offset"></feMergeNode>
							<feMergeNode in="SourceGraphic"></feMergeNode>
						</feMerge>
					</filter>
					<g id="ws" filter="url(#shadowss)">
						<use xlink:href="#cvm" x="0" y="0"></use>
					</g>
				</svg>
				<pre>
	&lt;filter id="shadowss"&gt;
		&lt;feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"&gt;&lt;/feGaussianBlur&gt;
		// feOffset 相对其当前位置移动图像
		&lt;feOffset in="blur" dx="4" dy="4" result="offset"&gt;&lt;/feOffset&gt;
		// &lt;feMerge&gt;把输出的阿尔法通道和原始图形堆叠，来产生投影效果
		// feMerge 建立在彼此顶部图像层
		&lt;feMerge&gt;
			// feMergeNode:feMerge的子元素
			&lt;feMergeNode in="offset"&gt;&lt;/feMergeNode&gt;
			&lt;feMergeNode in="SourceGraphic"&gt;&lt;/feMergeNode&gt;
		&lt;/feMerge&gt;
	&lt;/filter&gt;
	&lt;g id="ws" filter="url(#shadowss)"&gt;
		&lt;use xlink:href="#cvm" x="0" y="0"&gt;&lt;/use&gt;
	&lt;/g&gt;				
				</pre>
				<svg x="0px" y="0px" height="200">
					<defs>
						<filter id="shad">
							<feImage xlink:href="../img/bg.jpg" width="200" result="bg"></feImage>
							<feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"></feGaussianBlur>
							<feOffset dx="4" dy="4" in="blur" result="offset"></feOffset>
							<feMerge>
								<feMergeNode in="bg"></feMergeNode>
								<feMergeNode in="offset"></feMergeNode>
								<feMergeNode in="SourceGraphic"></feMergeNode>
							</feMerge>
						</filter>
					</defs>
					<g id="we" filter="url(#shad)">
						<use xlink:href="#cvm" x="0" y="0"></use>
					</g>
				</svg>
				<pre>
	&lt;defs&gt;
		&lt;filter id="shad"&gt;
			&lt;feImage xlink:href="../img/bg.jpg" width="200" result="bg" &gt; &lt;/feImage&gt;
			&lt;feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"&gt;&lt;/feGaussianBlur&gt;
			&lt;feOffset in="blur" dx="4" dy="4" result="offset"&gt;&lt;/feOffset&gt;
			&lt;feMerge&gt;
				&lt;feMergeNode in="bg"&gt;&lt;/feMergeNode&gt;
				&lt;feMergeNode in="offset"&gt;&lt;/feMergeNode&gt;
				&lt;feMergeNode in="SourceGraphic"&gt;&lt;/feMergeNode&gt;
			&lt;/feMerge&gt;
		&lt;/filter&gt;
	&lt;/defs&gt;
	&lt;g id="we" filter="url(#shad)"&gt;
		&lt;use xlink:href="#cvm" x="0" y="0"&gt;&lt;/use&gt;
	&lt;/g&gt;				
				</pre>
				<svg x="0px" y="0px" width="220" height="220" style="background: #000">
					<defs>
						<filter id="shadowxx">
						<feColorMatrix type="matrix" result="color" values="0 0 0 0 0
							  0 0 0 0.9 0
							  0 0 0 0.9 0
							  0 0 0 1 0">
						</feColorMatrix>
						<feGaussianBlur in="color" stdDeviation="4" result="blur"></feGaussianBlur>
						<feOffset in="blur" dx="0" dy="0" result="offset"></feOffset>
						<feMerge>
							<feMergeNode in="bg"></feMergeNode>
							<feMergeNode in="offset"></feMergeNode>
							<feMergeNode in="SourceGraphic"></feMergeNode>
						</feMerge>
						</filter>
					</defs>
					<g id="qx" filter="url(#shadowxx)">
						<use xlink:href="#cvm" x="0" y="0"></use>
					</g>
				</svg>	
				<pre>
	&lt;defs&gt;
		&lt;filter id="shadowxx"&gt;
			// feColorMatrix - 用于彩色滤光片转换
			// 和css的rgba类似  R G B A 1
			&lt;feColorMatrix type="matrix" result="color" 
			values="0 0 0 0 0  	  // R=0*R+0*G+0*B+0*A+0
				  0 0 0 0.9 0  	  // G=0*R+0*G+0*B+0.9*A+0
				  0 0 0 0.9 0  	  // B=0*R+0*G+0*B+0.9*A+0
				  0 0 0 1 0"&gt;  	  // A=0*R+0*G+0*B+1*A+0
			&lt;/feColorMatrix&gt;
			&lt;feGaussianBlur in="color" stdDeviation="4" result="blur"&gt;&lt;/feGaussianBlur&gt;
			&lt;feOffset in="blur" dx="0" dy="0" result="offset"&gt;&lt;/feOffset&gt;
			&lt;feMerge&gt;
				&lt;feMergeNode in="bg"&gt;&lt;/feMergeNode&gt;
				&lt;feMergeNode in="offset"&gt;&lt;/feMergeNode&gt;
				&lt;feMergeNode in="SourceGraphic"&gt;&lt;/feMergeNode&gt;
			&lt;/feMerge&gt;
		&lt;/filter&gt;
	&lt;/defs&gt;
	&lt;g id="qx" filter="url(#shadowxx)"&gt;
		&lt;use xlink:href="#cvm" x="0" y="0"&gt;&lt;/use&gt;
	&lt;/g&gt;				
				</pre>
			</div>
			<div>
				<h4 id="imageGrad">图片蒙版</h4>
				<p>给图片加一个颜色蒙层</p>
				<svg width="220">
					<defs>
						<filter id="shxx">
							<feImage xlink:href="../img/bg.jpg" result="bg"></feImage>
							<feComponentTransfer in="bg" result="bg">
								<feFuncR type="linear" slope="1" intercept="0.2"></feFuncR>
								<feFuncG type="linear" slope="1" intercept="0.1"></feFuncG>
								<feFuncB type="linear" slope="1" intercept="0.1"></feFuncB>
							</feComponentTransfer>
							<feMerge>
								<feMergeNode in="bg"></feMergeNode>
							</feMerge>
						</filter>
					</defs>
					<g id="zs" filter="url(#shxx)">
						<use xlink:href="#cvm" x="0" y="0"></use>
					</g>
				</svg>
				<pre>
	&lt;defs&gt;
		&lt;filter id="shxx"&gt;
			&lt;feImage xlink:href="../img/bg.jpg" result="bg"&gt;&lt;/feImage&gt;
			&lt;feComponentTransfer in="bg" result="bg"&gt;
				//slope是个比例因子，intercept是基准值
				&lt;feFuncR type="linear" slope="1" intercept="0.2"&gt;&lt;/feFuncR&gt;
				&lt;feFuncG type="linear" slope="1" intercept="0.1"&gt;&lt;/feFuncG&gt;
				&lt;feFuncB type="linear" slope="1" intercept="0.1"&gt;&lt;/feFuncB&gt;
			&lt;/feComponentTransfer&gt;
			&lt;feMerge&gt;
				&lt;feMergeNode in="bg"&gt;&lt;/feMergeNode&gt;
			&lt;/feMerge&gt;
		&lt;/filter&gt;
	&lt;/defs&gt;
	&lt;g id="zs" filter="url(#shxx)"&gt;
		&lt;use xlink:href="#cvm" x="0" y="0"&gt;&lt;/use&gt;
	&lt;/g&gt;				
				</pre>
			</div>
			<div>
				<h4 id="imagemixd">图片图形混合搭配</h4>
				<p>将图片放到图形内或将图片填充一个图形</p>
				<svg height="200">
					<defs>
						<filter id="in">
							<feImage xlink:href="../img/bg.jpg" width="200" result="bg"></feImage>
							<feComposite in="bg" in2="SourceGraphic" operator="in"></feComposite>
						</filter>
					</defs>
					<g id="inImage" filter="url(#in)" height="200">
						<use xlink:href="#cvm" x="0" y="0"></use>
					</g>
				</svg>
				<pre>
	&lt;defs&gt;
		&lt;filter id="in"&gt;
			&lt;feImage xlink:href="../img/bg.jpg" width="200" result="bg"&gt;&lt;/feImage&gt;
			&lt;feComposite in="bg" in2="SourceGraphic" operator="in"&gt;&lt;/feComposite&gt;
		&lt;/filter&gt;
	&lt;/defs&gt;
	&lt;g id="inImage" filter="url(#in)" height="200"&gt;
		&lt;use xlink:href="#cvm" x="0" y="0"&gt;&lt;/use&gt;
	&lt;/g&gt;			
				</pre>
				<svg height="200">
					<defs>
						<filter id="out">
							<feImage xlink:href="../img/bg.jpg" width="200" result="bg"></feImage>
							<feComposite in="bg" in2="SourceGraphic" operator="out"></feComposite>
						</filter>
					</defs>
					<g id="rgf" filter="url(#out)" height="200">
						<use xlink:href="#cvm" x="0" y="0"></use>
					</g>
				</svg>
				<pre>
	&lt;defs&gt;
		&lt;filter id="out"&gt;
			&lt;feImage xlink:href="../img/bg.jpg" width="200" result="bg"&gt;&lt;/feImage&gt;
			&lt;feComposite in="bg" in2="SourceGraphic" operator="out"&gt;&lt;/feComposite&gt;
		&lt;/filter&gt;
	&lt;/defs&gt;
	&lt;g id="rgf" filter="url(#out)" height="200"&gt;
		&lt;use xlink:href="#cvm" x="0" y="0"&gt;&lt;/use&gt;
	&lt;/g&gt;			
				</pre>
			</div>
		</div>
	</div>
	<!--页面加载进度条-->
	<script src="https://cdn.bootcdn.net/ajax/libs/pace/0.5.0/pace.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.17/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var app = new Vue({
			el: "#app",
			data: function() {
				return {
					list: [
						{ name: "线性渐变",id: "rect",explain: '路径'},
						{ name: "放射性渐变",id: "radial",explain: '发散形渐变'},
						{ name: "图案",id: "image",explain: '发散形渐变'},
						{ name: "高斯模糊",id: "feGaussianBlur",explain: ''},
						{ name: "投影",id: "boxshadow",explain: ''},
						{ name: "图片蒙版",id: "imageGrad",explain: ''},
						{ name: "图片图形混合搭配",id: "imagemixd",explain: ''},
					]
				}
			},
			mounted() {
			}
		})
	</script>
</body>

</html>